import React, { useEffect } from 'react';
import styles from '@/assets/router.module.css';
import { withRouter } from 'react-router-dom';
// import asyncComponent from './AsyncComponent'
// 懒加载
// import LazyLoadable from '../utils/LazyLoadable'
/* 新的loadable组件  */
import Loadable from '@loadable/component';
import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
/* 路由 */

// 导入路由
import {
  BrowserRouter as Router, // 把BrowserRouter输出到Router中
  Switch,
  Route,
  Link,
  // useParams,
  NavLink,
  Redirect,
  useHistory
} from 'react-router-dom';
import GuardRouter from './GuardRouter';
import Home from '@/views/Home';

import { Switch as AntSwitch } from 'antd';
// 引入 css 文件
// import darks from '../../public/darkMode/dark.css'

const menu = (
  <Menu>
    <Menu.Item key='reduxDemo'>
      <NavLink to='/demo/myHooks?type=MyRedux' activeClassName={styles.activeCName}>
        Redux Demo
      </NavLink>
    </Menu.Item>
    <Menu.Item key='reduxToolkit'>
      <NavLink to='/demo/myHooks?type=MyReduxToolkit' activeClassName={styles.activeCName}>
        Redux toolkit
      </NavLink>
    </Menu.Item>
    <Menu.Item key='mobxLearn'>
      <NavLink to='/demo/myHooks?type=MyHooks' activeClassName={styles.activeCName}>
        自定义 hooks
      </NavLink>
    </Menu.Item>
    <Menu.Item key='testDemo'>
      <NavLink to='/demo/myHooks?type=MyDemo' activeClassName={styles.activeCName}>
        我的 Demo
      </NavLink>
    </Menu.Item>
  </Menu>
);

function Routers(props) {
  // const {history} = props
  // 阻止跳转
  // history.block('阻塞跳转信息 禁止跳转！！')

  return (
    <Router
    // getUserConfirmation={(msg, callback) => {
    //     console.log('某个子组件发起阻塞', msg, )
    //     callback(true)
    // }}
    >
      <ul className={styles['nav']}>
        {/* <NavLink />是<Link />的一种特殊类型*/}
        <li>
          <Link to='/home'>home</Link>
        </li>
        <li>
          <NavLink to='/about' activeClassName={styles.activeCName}>
            about
          </NavLink>
        </li>
        <li>
          <NavLink to='/classReact' activeClassName={styles.activeCName}>
            classReact
          </NavLink>
        </li>
        <li>
          <NavLink to='/hookLearn' activeClassName={styles.activeCName}>
            HookLearn
          </NavLink>
        </li>
        <li>
          <NavLink to='/reduxLearn' activeClassName={styles.activeCName}>
            reduxLearn
          </NavLink>
        </li>
        <li>
          <NavLink to='/routerLearn' activeClassName={styles.activeCName}>
            RouterLearn
          </NavLink>
        </li>
        <li>
          <NavLink to='/mobxLearn' activeClassName={styles.activeCName}>
            MobxLearn
          </NavLink>
        </li>
        <li>
          <NavLink to='/baseJs' activeClassName={styles.activeCName}>
            baseJs
          </NavLink>
        </li>
        <li>
          <Dropdown overlay={menu}>
            <a href='/' className='ant-dropdown-link' onClick={e => e.preventDefault()}>
              Demo <DownOutlined />
            </a>
          </Dropdown>
        </li>
        {/* TODO 编辑器存在各种问题 */}
        {/* <li>
          <NavLink to='/job' activeClassName={styles.activeCName}>
            job
          </NavLink>
        </li> */}
        <li>
          <NavLink to='/renew' activeClassName={styles.activeCName}>
            renew
          </NavLink>
        </li>
        <li>
          <NavLink to='algorithm' activeClassName={styles.activeCName}>
            algorithm
          </NavLink>
        </li>
        <li>
          <NavLink to='gpt' activeClassName={styles.activeCName}>
            gpt
          </NavLink>
        </li>
        <li>
          <AntSwitch
            onChange={checked => {
              // JS查询是系统是否为暗色配色
              // const themeSetDark = window.matchMedia('(prefers-color-scheme: dark)').matches
              // const themeSetLight = window.matchMedia('(prefers-color-scheme: light)').matches
              // console.log('系统设置主题的状态', 'themeSetDark',themeSetDark, 'themeSetLight', themeSetLight)

              // console.log(`switch to ${checked}`);
              const headDom = document.getElementsByTagName('head')[0];
              const getLink = headDom.getElementsByTagName('link');

              for (const l of getLink) {
                if (l.getAttribute('data-type') === 'theme') {
                  l.remove();
                }
              }
              if (checked) {
                const linkDom = document.createElement('link');
                linkDom.dataset.type = 'theme';
                linkDom.setAttribute('rel', 'stylesheet');
                linkDom.href = '/darkMode/dark.css';
                headDom.appendChild(linkDom);
              } else {
                console.log('light 去除黑暗模式');
              }
            }}
          />
        </li>
      </ul>
      {/* <Switch /> 通过查找所有的子<Route />并渲染与当前URL匹配的第一个<Route /> 的内容 */}
      <Switch>
        {/* 路径= "/"的路径始终匹配任何路径的URLexact：属性表示精准匹配 */}
        <GuardRouter exact path='/'>
          {/* 重定向 Redirect */}
          <Redirect to='/home' />
        </GuardRouter>
        <GuardRouter
          path='/home'
          // component={ asyncComponent(() => import('../views/Home')) }
          // component = { asyncComponent('../views/Home') }
          exact
          name='home'
        >
          <Home />
        </GuardRouter>
        <GuardRouter path='/about' component={Loadable(() => import('../views/About'))}>
          {/* <About /> */}
        </GuardRouter>
        <GuardRouter path='/classReact' component={Loadable(() => import('@/views/ClassReact'))}></GuardRouter>
        <GuardRouter path='/hookLearn' component={Loadable(() => import('@/views/HookLearn'))}></GuardRouter>
        <GuardRouter path='/reduxLearn' component={Loadable(() => import('@/views/ReduxLearn'))}></GuardRouter>
        <GuardRouter path='/routerLearn' component={Loadable(() => import('@/views/RouterLearn'))}></GuardRouter>
        <GuardRouter path='/mobxLearn' component={Loadable(() => import('@/views/MobxLearn'))}></GuardRouter>
        <GuardRouter exact path='/demo/myHooks' component={Loadable(() => import('../views/Demo'))}></GuardRouter>
        <GuardRouter exact path='/baseJs' component={Loadable(() => import('@/views/BaseJs'))}></GuardRouter>
        {/* <GuardRouter path='/job' component={Loadable(() => import('@/views/Job'))}></GuardRouter> */}
        <GuardRouter path='/renew' component={Loadable(() => import('@/views/renew'))} />
        <GuardRouter path='/algorithm' component={Loadable(() => import('@/views/Algorithm'))} />
        <GuardRouter path='/gpt' component={Loadable(() => import('@/views/Gpt'))} />
        {/* <Route
            path={item.path}
            element={item.path === pathname && item.auth && !isLogin
                ? <Navigate to='/login' replace={true}></Navigate>
                : item.component} key={item.path}>
            { item?.child && RouteNav(item.child) }
        </Route> */}
      </Switch>
    </Router>
  );
}
export default withRouter(Routers);
